<template>
  <div class="gamest">
    <tab>
      <tab-item :selected="item.activityid == selected" v-for="item in gameList" :key="item.activityid" @on-item-click="selectedClick(item.activityid)">{{item.name}}</tab-item>
    </tab>
    <div class="sort">
      <div class="sort_tab">
        <button class="room-btn" v-bind:class="{'active': !clubMode}" @click="chargeRoomClick">收费房间</button>
        <button class="club-btn" v-bind:class="{'active': clubMode}" @click="clubClick">亲友圈</button>
      </div>
    </div>
    <div class="personCharts" v-bind:class="{'disappear': clubMode}"></div>
    <div class="playCharts"></div>
    <div class="totalCharts"></div>
    <div class="cardCharts"></div>
    <table-view-with-title title="所有数据" :titles="titles" :dataSource="totalData" @next="changePageClick" @previous="changePageClick" :maxPage="maxPage"></table-view-with-title>
  </div>
</template>
<script>
import { Tab, TabItem, dateFormat } from "vux";
import { fixZero } from "../../scripts/utils.js";
import echarts from "echarts";
import TableViewWithTitle from "../../components/common/TableViewWithTitle.vue";
export default {
  data() {
    return {
      gameList: [],
      selected: "",
      clubMode: false,
      titles: [
        { key: "stat", value: "日期" },
        { key: "tablecountofcreated", value: "每日开桌数" },
        { key: "tablecountofclosed", value: "每日关桌数" },
        { key: "tablecountofcompleted", value: "完成桌数" },
        { key: "tablecountofuncompleted", value: "未完成桌数[1-N]" },
        { key: "tablecountofdismissed", value: "解散桌数(=0)" },
        { key: "shouldgameroundcount", value: "应该总游戏盘数" },
        { key: "totalgameroundcount", value: "实际总游戏盘数" },
        { key: "gameplayercount", value: "参与游戏玩家数" },
        { key: "creatorcount", value: "房主数量" },
        { key: "usecard", value: "使用房卡" },
        { key: "returncard", value: "退回房卡" },
        { key: "consumedcard", value: "消耗房卡" }
      ],
      totalData: [],
      maxPage: 1,
      kaizhuodata: {},
      zhuoshudata: {},
      cardData: {}
    };
  },
  components: {
    Tab,
    TabItem,
    TableViewWithTitle
  },
  created() {},
  watch: {
    kaizhuodata() {
      /**今日开桌 */
      let playDom = document.querySelector(".playCharts");
      let playCharts = echarts.init(playDom);
      playCharts.setOption({
        title: {
          text: "今天开桌",
          left: "center"
        },
        legend: {
          bottom: "0px"
        },
        tooltip: {},
        xAxis: {
          data: this.kaizhuodata.x
        },
        yAxis: {
          name: "开/关桌子数"
        },
        series: { type: "bar", data: this.kaizhuodata.y }
      });
    },
    zhuoshudata() {
      /**桌数统计 */
      let totalDom = document.querySelector(".totalCharts");
      let totalCharts = echarts.init(totalDom);
      totalCharts.setOption({
        title: {
          text: "开桌统计",
          left: "center"
        },
        legend: {
          bottom: "0px",
          data: this.zhuoshudata.name
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.zhuoshudata.x
        },
        yAxis: {
          name: "桌数"
        },
        series: this.zhuoshudata.y
      });
    },
    cardData() {
      /**房卡消耗 */
      let cardDom = document.querySelector(".cardCharts");
      let cardCharts = echarts.init(cardDom);
      cardCharts.setOption({
        title: {
          text: "房卡消耗",
          left: "center"
        },
        legend: {
          bottom: "0px",
          data: this.cardData.name
        },
        tooltip: {},
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.cardData.x
        },
        yAxis: {
          name: "桌数"
        },
        series: this.cardData.y
      });
    }
  },
  mounted() {
    /**获取游戏列表 */
    let fetchGame = this.apiService.statics.getagentactivity().then(res => {
      this.selected = res.data.activityid;
      this.gameList = res.data.activities;
      this.room(this.selected);
    });
  },
  methods: {
    chargeRoomClick() {
      this.clubMode = false;
      this.room();
    },
    clubClick() {
      this.clubMode = true;
      this.club();
    },
    selectedClick(id) {
      this.selected = id;
      this.room();
    },
    fetchTotalData(currentPage) {
      this.apiService.statics
        .chargeroomstaticslist({
          activityid: this.selected,
          pagesize: 10,
          currentpage: currentPage
        })
        .then(res => {
          this.maxPage = Math.ceil(res.data.total / 10);
          this.totalData = res.data.chargeroomstaticslist;
          this.totalData.forEach(item => {
            item.stat = dateFormat(item.stat * 1000, "YYYY-MM-DD");
          });
        });
    },
    changePageClick(data) {
      this.fetchTotalData(data);
    },
    room() {
      /**获取全部数据 */
      this.fetchTotalData(1);
      /**今日在线*/
      let personDom = document.querySelector(".personCharts");
      let personCharts;
      if (personDom) {
        personCharts = echarts.init(personDom);
      }
      //今日在线
      this.apiService.statics
        .onlinetodayforroomchart({
          activityid: this.selected
        })
        .then(res => {
          let personX = res.data.onlinetodaycategory;
          let personY =
            res.data.onlinetodayseries[0] && res.data.onlinetodayseries[0].data;
          let name =
            res.data.onlinetodayseries[0] && res.data.onlinetodayseries[0].name;
          personX = personX.map(item => {
            let time = new Date(item * 1000);
            let hour = fixZero(time.getHours(), 2);
            let minutes = fixZero(time.getMinutes(), 2);
            return `${hour}:${minutes}`;
          });
          return {
            x: personX,
            y: personY,
            name: name
          };
        })
        .then(data => {
          if (personCharts) {
            personCharts.setOption({
              title: {
                text: "今天在线",
                left: "center"
              },
              legend: {
                bottom: "0px",
                data: data.name
              },
              tooltip: {},
              xAxis: {
                type: "category",
                boundaryGap: false,
                data: data.x
              },
              yAxis: {
                name: "人数"
              },
              series: { type: "line", name: data.name, data: data.y }
            });
          }
        });
      //开桌
      this.apiService.statics
        .rentaltodayforroomchart({
          activityid: this.selected
        })
        .then(res => {
          let data = res.data.rentaltodayseries;
          let playX = data.map(item => {
            return item.name;
          });
          let playY = data.map(item => {
            return item.data[0];
          });
          this.kaizhuodata = {
            x: playX,
            y: playY
          };
        });
      //桌数统计
      this.apiService.statics
        .rentallatestforroomchart({
          activityid: this.selected
        })
        .then(res => {
          let personX = res.data.rentallatestcategory;
          let personY = res.data.rentallatestseries;
          let name = [];
          personX = personX.map(item => {
            let time = new Date(item * 1000).toLocaleDateString();
            return time;
          });
          personY = personY.map(item => {
            name.push(item.name);
            return {
              name: item.name,
              type: "line",
              data: item.data
            };
          });
          this.zhuoshudata = {
            x: personX,
            y: personY,
            name: name
          };
        });
      //房卡消耗
      this.apiService.statics
        .fangkalatestforroomchart({
          activityid: this.selected
        })
        .then(res => {
          let personX = res.data.fangkalatestcategory;
          let personY = res.data.fangkalatestseries;
          let name = [];
          personX = personX.map(item => {
            let time = new Date(item * 1000).toLocaleDateString();
            return time;
          });
          personY = personY.map(item => {
            name.push(item.name);
            return {
              name: item.name,
              type: "line",
              data: item.data
            };
          });
          this.cardData = {
            x: personX,
            y: personY,
            name: name
          };
        });
    },
    club() {
      /**获取全部数据 */
      this.fetchTotalData(1);
      //开桌
      this.apiService.statics
        .rentaltodayforclubchart({
          activityid: this.selected
        })
        .then(res => {
          let data = res.data.rentaltodayclubseries;
          let playX = data.map(item => {
            return item.name;
          });
          let playY = data.map(item => {
            return item.data[0];
          });
          this.kaizhuodata = {
            x: playX,
            y: playY
          };
        });
      //桌数统计
      this.apiService.statics
        .rentallatestforclubchart({
          activityid: this.selected
        })
        .then(res => {
          let personX = res.data.rentallatestclubcategory;
          let personY = res.data.rentallatestclubseries;
          let name = [];
          personX = personX.map(item => {
            let time = new Date(item * 1000).toLocaleDateString();
            return time;
          });
          personY = personY.map(item => {
            name.push(item.name);
            return {
              name: item.name,
              type: "line",
              data: item.data
            };
          });
          this.zhuoshudata = {
            x: personX,
            y: personY,
            name: name
          };
        });
      //房卡消耗
      this.apiService.statics
        .fangkalatestforclubchart({
          activityid: this.selected
        })
        .then(res => {
          let personX = res.data.fangkalatestclubcategory;
          let personY = res.data.fangkalatestclubseries;
          let name = [];
          personX = personX.map(item => {
            let time = new Date(item * 1000).toLocaleDateString();
            return time;
          });
          personY = personY.map(item => {
            name.push(item.name);
            return {
              name: item.name,
              type: "line",
              data: item.data
            };
          });
          this.cardData = {
            x: personX,
            y: personY,
            name: name
          };
        });
    }
  }
};
</script>

<style>
.gamest .vux-tab {
  height: auto;
}
</style>



<style scoped>
.gamest {
  background-color: #fff;
}
.sort {
  padding: 0.25rem 0.7rem;
}
.sort_tab {
  display: flex;
  justify-content: center;
}
.sort_tab button {
  border: 0.01rem solid var(--btn-color);
  height: 0.48rem;
  flex-basis: 0;
  flex-grow: 1;
}
.room-btn {
  border-top-left-radius: 0.1rem;
  border-bottom-left-radius: 0.1rem;
}
.club-btn {
  border-top-right-radius: 0.1rem;
  border-bottom-right-radius: 0.1rem;
}
.active {
  background-color: var(--btn-color);
  color: #fff;
}
.personCharts,
.totalCharts,
.cardCharts,
.playCharts {
  height: 5rem;
}
.disappear {
  display: none;
}
</style>
